<template>
    <a-card :bordered="false" class="card-area">
        <div>
            <a-form layout="horizontal">
                <div>
                    <a-row >
                        <a-col :md="8" :sm="24" >
                            <a-form-item
                                    label="书名"
                                    :labelCol="{span: 3}"
                                    :wrapperCol="{span: 18, offset: 1}">
                                <a-input v-model="queryParams.bookTitle"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24" >
                            <a-form-item
                                    label="作者"
                                    :labelCol="{span: 5}"
                                    :wrapperCol="{span: 18, offset: 1}">
                                <a-input v-model="queryParams.bookAuthor"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24" >
                            <a-form-item
                                    label="出版社"
                                    :labelCol="{span: 5}"
                                    :wrapperCol="{span: 18, offset: 1}">
                                <a-input v-model="queryParams.publisher"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </span>
            </a-form>
        </div>
        <div>
            <div class="operator">
                <a-button v-hasPermission="['book:delete']" @click="batchDelete">删除</a-button>
            </div>
            <!-- 表格区域 -->
            <a-table ref="TableInfo"
                     :columns="columns"
                     :rowKey="record => record.bookId"
                     :dataSource="dataSource"
                     :pagination="pagination"
                     :loading="loading"
                     :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                     @change="handleTableChange"
                     :scroll="{ x: 900 }">
                <template slot="remark" slot-scope="text, record">
                    <a-popover placement="topLeft">
                        <template slot="content">
                            <div style="max-width: 200px">{{text}}</div>
                        </template>
                        <p style="width: 200px;margin-bottom: 0">{{text}}</p>
                    </a-popover>
                </template>
                <template slot="operation" slot-scope="text, record">
                    <a-icon v-hasPermission="['book:update']" type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="修改"></a-icon>
                    <a-badge v-hasNoPermission="['book:update']" status="warning" text="无权限"></a-badge>
                </template>
            </a-table>
        </div>
        <!-- 修改 -->
        <book-edit
                ref="bookEdit"
                @close="handleDictEditClose"
                @success="handleDictEditSuccess"
                :dictEditVisiable="dictEditVisiable">
        </book-edit>
    </a-card>
</template>

<script>
    import BookEdit from './BookEdit'

    export default {
        name: 'bookManage',
        components: {
            BookEdit
        },
        data () {
            return {
                dataSource: [],
                selectedRowKeys: [],
                paginationInfo: null,
                pagination: {
                    pageSizeOptions: ['10', '20', '30', '40', '100'],
                    defaultCurrent: 1,
                    defaultPageSize: 10,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
                },
                queryParams: {
                    curPage:1,
                    pageSize:10,
                    bookTitle:'',
                    bookAuthor:'',
                    publisher:''
                },
                dictEditVisiable: false,
                loading: false
            }
        },
        computed: {
            columns () {
                return [{
                    title: 'ISBN',
                    dataIndex: 'isbn'
                }, {
                    title: '书名',
                    dataIndex: 'bookTitle'
                }, {
                    title: '作者',
                    dataIndex: 'bookAuthor'
                }, {
                    title: '出版社',
                    dataIndex: 'publisher'
                }, {
                    title: '出版年份',
                    dataIndex: 'yearOfPublication'
                }, {
                    title: '操作',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operation' },
                    fixed: 'right',
                    width: 100
                }]
            }
        },
        mounted () {
            this.fetch()
        },
        methods: {
            onSelectChange (selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
            },
            handleDictEditSuccess () {
                this.dictEditVisiable = false
                this.$message.success('修改图书成功')
                this.search()
            },
            handleDictEditClose () {
                this.dictEditVisiable = false
            },
            edit (record) {
                this.$refs.bookEdit.setFormValues(record)
                this.dictEditVisiable = true
            },
            batchDelete () {
                if (!this.selectedRowKeys.length) {
                    this.$message.warning('请选择需要删除的记录')
                    return
                }
                let that = this
                this.$confirm({
                    title: '确定删除所选中的记录?',
                    content: '当您点击确定按钮后，这些记录将会被彻底删除',
                    centered: true,
                    onOk () {
                        let bookIds = that.selectedRowKeys;
                        console.log(bookIds)
                        that.$formPost('books/deleteBookByBookId',{bookIds:bookIds}).then((data) => {
                            if(data.status == 1) {
                                that.$message.success('删除成功')
                                that.selectedRowKeys = []
                                that.search()
                            } else {
                                that.$message.error('删除失败')
                            }

                        })
                    },
                    onCancel () {
                        that.selectedRowKeys = []
                    }
                })
            },
            search () {
                this.fetch({
                    ...this.queryParams
                })
            },
            reset () {
                // 取消选中
                this.selectedRowKeys = []
                // 重置分页
                this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent
                if (this.paginationInfo) {
                    this.paginationInfo.current = this.pagination.defaultCurrent
                    this.paginationInfo.pageSize = this.pagination.defaultPageSize
                }
                this.paginationInfo = null
                // 重置查询参数
                this.queryParams = {
                    curPage:1,
                    pageSize:10,
                    bookTitle:'',
                    bookAuthor:'',
                    publisher:''
                }
                this.fetch()
            },
            handleTableChange (pagination, filters, sorter) {
                this.paginationInfo = pagination
                this.fetch({
                    ...this.queryParams
                })
            },
            fetch (params = {}) {
                this.loading = true
                if (this.paginationInfo) {
                    // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
                    this.$refs.TableInfo.pagination.current = this.paginationInfo.current
                    this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
                    params.pageSize = this.paginationInfo.pageSize
                    params.curPage = this.paginationInfo.current
                } else {
                    // 如果分页信息为空，则设置为默认值
                    params.pageSize = this.pagination.defaultPageSize
                    params.curPage = this.pagination.defaultCurrent
                }
                this.$formPost('books/userBookList',params).then((data)=> {
                    console.log(data)
                    if(data.status == 1){
                        const pagination = { ...this.pagination }
                        pagination.total = data.data.total
                        this.loading = false
                        this.dataSource = data.data.rows
                        this.pagination = pagination
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../../static/less/Common";
</style>
